<%--
  Created by IntelliJ IDEA.
  User: 92460
  Date: 2020/12/18
  Time: 15:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
</head>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
<body>
<%
    String path = request.getContextPath()+"/servlet/DoReg";
%>
<form action="<%=path%>" id="reg-form">
    <p>用户名：<input type="text" name="username" onblur="checkUser()"><span id="msg"></span></p>
    <p>密码： <input type="password" name="password" onblur="checkPwd()"><span id="pwdmsg"></span></p>
    <p><input type="submit" value="注册"></p>
</form>


<script>
    let xmlHttp = new XMLHttpRequest();
    let responseText = xmlHttp.responseText;
    alert(responseText);
    console.log(responseText);
    function checkUser(){
        let username = $("input[name='username']").val();
        if(!username){
            $("#msg").text("用户名不能为空");
        }else{
            xmlHttp.onreadystatechange =doResponse;
            let url = "${pageContext.request.contextPath}"+"/servlet/doReg?username=" + username;
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
        }
    }
    function doResponse() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                if (responseText==1){
                    // 重名了
                    $("#msg").text("用户名已存在！");
                }else{
                    $("#msg").text("用户名可以使用！");
                }
            }else{
                alert("服务器暂时未响应，稍后请重试！");
            }
        }
    }
    function checkPwd(){
        let password = $("input[name='password']").val();
        if(!password){
            $("#pwdmsg").text("密码不能为空");
        }else if(password.length<6){
            $("#pwdmsg").text("密码不能小于6位");
        }
    }

</script>
</body>
</html>
